<template>
  <div class="device-home">
    <div class="device-home-left">
      <a-input
        v-model="searchData.materialCode"
        style="padding: 0.5rem"
        placeholder="搜索"
        :allowClear="true"
        @keyup.enter.native="searchValuechangeFun"
      />
      <div style="overflow: auto; height: 92%">
        <a-tree
          v-if="!dataStaus"
          :load-data="onLoadData"
          :tree-data="treeData"
          :replace-fields="replaceFields"
          :auto-expand-parent="autoExpandParent"
          @expand="onExpand"
          @select="btnActive"
        >
          <!-- <template #title="{ key: treeKey, MaterialName }">
            <div
              :class="[
                selectedtreeData == key ? 'listboxactive' : 'listboxactive',
              ]"
            >
              {{ MaterialName }}
            </div>
          </template>-->
        </a-tree>
      </div>
    </div>
    <div class="device-home-right" style="height: 100%; overflow-y: auto">
      <div class="operation-search">
        <a-form style="margin-left: 0.625rem" layout="inline">
          <a-form-item label="创建日期：">
            <a-range-picker
              format="YYYY-MM-DD"
              :default-value="defaulttimeList"
              @change="onTime"
              v-model="defaulttimeList"
            >
              <template slot="dateRender" slot-scope="current">
                <div
                  class="ant-calendar-date"
                  :style="getcurrentStyle(current)"
                >
                  {{ current.date() }}
                </div>
              </template>
            </a-range-picker>
          </a-form-item>
          <a-form-item label="物料编码">
            <a-input v-model="tableSearch.MaterialCode" />
          </a-form-item>
          <a-form-item label="物料名称">
            <a-input v-model="tableSearch.MaterialName" />
          </a-form-item>
          <a-form-item label="是否需要洗瓶：">
            <a-select
              :allowClear="true"
              v-model="tableSearch.IfCleaning"
              style="width: 150px"
            >
              <a-select-option
                v-for="item in typeList"
                :key="item.type"
                :value="item.type"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="是否需要消毒：">
            <a-select
              :allowClear="true"
              v-model="tableSearch.IfDisinfect"
              style="width: 150px"
            >
              <a-select-option
                v-for="item in typeList"
                :key="item.type"
                :value="item.type"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="是否需要辐照：">
            <a-select
              :allowClear="true"
              v-model="tableSearch.IfIrradiation"
              style="width: 150px"
            >
              <a-select-option
                v-for="item in typeList"
                :key="item.type"
                :value="item.type"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="是否低值：">
            <a-select
              :allowClear="true"
              v-model="tableSearch.IfLowValue"
              style="width: 150px"
            >
              <a-select-option
                v-for="item in typeList"
                :key="item.type"
                :value="item.type"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="收料是否管控批号: ">
            <a-select
              :allowClear="true"
              v-model="tableSearch.IfReceiveControl"
              style="width: 150px"
            >
              <a-select-option
                v-for="item in typeList"
                :key="item.type"
                :value="item.type"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="生产需登记两个设备: ">
            <a-select
              :allowClear="true"
              v-model="tableSearch.IsTwoProSegment"
              style="width: 150px"
            >
              <a-select-option
                v-for="item in typeList"
                :key="item.type"
                :value="item.type"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="取样不管控平衡: ">
            <a-select
              :allowClear="true"
              v-model="tableSearch.IfSampleBalance"
              style="width: 150px"
            >
              <a-select-option
                v-for="item in typeList"
                :key="item.type"
                :value="item.type"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-button
              class="default-button"
              :loading="loading"
              style="margin-right: 0.625rem"
              @click="upTableListFun"
            >
              查询
            </a-button>
            <a-button
              class="default-button"
              @click="SyncItem"
              style="margin-right: 0.625rem"
              >同步物料</a-button
            >
            <a-button
              class="default-button"
              @click="InItem"
              style="margin-right: 0.625rem"
              >导入</a-button
            >
            <a-button class="default-button" @click="DownloadMaterial"
              >导出</a-button
            >
          </a-form-item>
        </a-form>
      </div>
      <div class="table-box" id="OperationManageID">
        <a-table
          :columns="tableColumns"
          :row-key="(record) => record.MaterialCode"
          :data-source="tableData"
          :loading="loading"
          :customRow="rowClick"
          :rowClassName="setRowClassName"
          :pagination="false"
          :scroll="{ x: 300, y: procedurescrollY }"
          size="small"
        >
          <template slot="IfCleaning" slot-scope="text, record">
            <a-checkbox disabled v-model="record.IfCleaning"></a-checkbox>
          </template>
          <template slot="IfDisinfect" slot-scope="text, record">
            <a-checkbox disabled v-model="record.IfDisinfect"></a-checkbox>
          </template>
          <template slot="IfIrradiation" slot-scope="text, record">
            <a-checkbox disabled v-model="record.IfIrradiation"></a-checkbox>
          </template>
          <template slot="IfLowValue" slot-scope="text, record">
            <a-checkbox disabled v-model="record.IfLowValue"></a-checkbox>
          </template>
          <template slot="IfReceiveControl" slot-scope="text, record">
            <a-checkbox disabled v-model="record.IfReceiveControl"></a-checkbox>
          </template>
          <template slot="IsTwoProSegment" slot-scope="text, record">
            <a-checkbox disabled v-model="record.IsTwoProSegment"></a-checkbox>
          </template>
          <template slot="IfSampleBalance" slot-scope="text, record">
            <a-checkbox disabled v-model="record.IfSampleBalance"></a-checkbox>
          </template>
          <template slot="action" slot-scope="text, record">
            <div style="display: flex; justify-content: space-around">
              <a-icon
                type="edit"
                class="icon-class"
                @click="editMaterialClick(record)"
              />
            </div>
          </template>
        </a-table>
        <footer class="table-paging">
          <a-pagination
            show-size-changer
            :default-current="1"
            v-model="tableSearch.pageRequestModel.pageIndex"
            :page-size.sync="tableSearch.pageRequestModel.pageSize"
            :total="tableTotal"
            @change="tableChange"
            @showSizeChange="tablehowsizeChange"
          />
        </footer>
      </div>
    </div>
    <a-modal
      title="物料信息"
      :visible="edtiMaterialShow"
      @ok="onSubmit"
      :confirmLoading="buttonLoading"
      @cancel="edtiMaterialShow = false"
      width="35%"
    >
      <div>
        <a-form :form="selectedrow">
          <a-form-item
            label="物料名称："
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-input :disabled="true" v-model="selectedrow.MaterialName" />
          </a-form-item>
          <a-form-item
            label="物料编码："
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-input :disabled="true" v-model="selectedrow.MaterialCode" />
          </a-form-item>
          <a-form-item
            label="有效期："
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-input
              :disabled="true"
              v-model="selectedrow.QualityDeadLineAfterCanning"
            />
          </a-form-item>
          <a-form-item
            label="单位："
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-input :disabled="true" v-model="selectedrow.ComunitName" />
          </a-form-item>
          <a-form-item
            label="物料说明："
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-textarea
              :allowClear="true"
              v-model="selectedrow.Remark"
              :auto-size="{ minRows: 3, maxRows: 5 }"
            />
          </a-form-item>
          <a-form-item
            label="是否需要洗瓶："
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-checkbox v-model="selectedrow.IfCleaning"></a-checkbox>
          </a-form-item>
          <a-form-item
            label="是否需要消毒："
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-checkbox v-model="selectedrow.IfDisinfect"></a-checkbox>
          </a-form-item>
          <a-form-item
            label="是否需要辐照："
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-checkbox v-model="selectedrow.IfIrradiation"></a-checkbox>
          </a-form-item>
          <a-form-item
            label="是否低值："
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-checkbox v-model="selectedrow.IfLowValue"></a-checkbox>
          </a-form-item>
          <a-form-item
            label="收料是否管控批号: "
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-checkbox v-model="selectedrow.IfReceiveControl"></a-checkbox>
          </a-form-item>
          <a-form-item
            label="生产需登记两个设备: "
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-checkbox v-model="selectedrow.IsTwoProSegment"></a-checkbox>
          </a-form-item>
          <a-form-item
            label="取样不管控平衡: "
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-checkbox v-model="selectedrow.IfSampleBalance"></a-checkbox>
          </a-form-item>
          <a-form-item
            label="批号字符："
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-input :allowClear="true" v-model="selectedrow.CharacterValue" />
          </a-form-item>
          <a-form-item
            label="销售数量："
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-input-number
              :allowClear="true"
              style="width: 100%"
              v-model="selectedrow.SpecConvert"
            />
          </a-form-item>
          <a-form-item
            label="销售规格："
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-input :allowClear="true" v-model="selectedrow.MarketingSpec" />
          </a-form-item>
          <a-form-item
            label="装箱数量："
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-input-number
              :allowClear="true"
              style="width: 100%"
              v-model="selectedrow.Spec"
            />
          </a-form-item>
          <a-form-item
            label="装箱规格："
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-input :allowClear="true" v-model="selectedrow.PackingSpec" />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
    <!-- 文件上传 -->
    <file-form :show.sync="InItemShow" @upList="InItemShowList"></file-form>
  </div>
</template>

<script>
import { debounce } from "@/common/debounce";
import FileForm from "./children/file-form.vue";
import {
  GetMaterialList,
  GetMaterialTypeList,
  EditMaterial,
  SynchroMaterial,
  getMaterialSearch,
  MaterialDownload,
  getMaterial,
  getMaterialsByParentNode,
} from "@/api/MaterialManagement/index.js";
import { getTableScroll } from "@/common/table-calc";
const tableColumns = [
  {
    title: "序号",
    dataIndex: "num",
    key: "num",
    align: "center",
    width: "60px",
  },
  {
    title: "物料编码",
    dataIndex: "MaterialCode",
    key: "MaterialCode",
    ellipsis: true,
    align: "center",
    width: "150px",
  },
  {
    title: "物料名称",
    dataIndex: "MaterialName",
    key: "MaterialName",
    align: "center",
    width: "200px",
  },

  {
    title: "有效期",
    dataIndex: "QualityDeadLineAfterCanning",
    key: "QualityDeadLineAfterCanning",
    ellipsis: true,
    align: "center",
    width: "150px",
  },
  {
    title: "单位",
    dataIndex: "ComunitName",
    key: "ComunitName",
    ellipsis: true,
    align: "center",
    width: "60px",
  },
  {
    title: "物料说明",
    dataIndex: "Remark",
    key: "Remark",
    ellipsis: true,
    align: "center",
    width: "200px",
    scopedSlots: { customRender: "Remark" },
  },
  {
    title: "需要洗瓶",
    dataIndex: "IfCleaning",
    key: "IfCleaning",
    ellipsis: true,
    align: "center",
    width: "100px",
    scopedSlots: { customRender: "IfCleaning" },
  },
  {
    title: "需要消毒",
    dataIndex: "IfDisinfect",
    key: "IfDisinfect",
    ellipsis: true,
    align: "center",
    width: "100px",
    scopedSlots: { customRender: "IfDisinfect" },
  },
  {
    title: "需要辐照",
    dataIndex: "IfIrradiation",
    key: "IfIrradiation",
    ellipsis: true,
    align: "center",
    width: "100px",
    scopedSlots: { customRender: "IfIrradiation" },
  },
  {
    title: "低值",
    dataIndex: "fLowValue",
    key: "fLowValue",
    ellipsis: true,
    align: "center",
    width: "60px",
    scopedSlots: { customRender: "IfLowValue" },
  },
  {
    title: "收料管控批号",
    dataIndex: "IfReceiveControl",
    key: "IfReceiveControl",
    ellipsis: true,
    align: "center",
    width: "100px",
    scopedSlots: { customRender: "IfReceiveControl" },
  },
  {
    title: "生产需登记两个设备",
    dataIndex: "IsTwoProSegment",
    key: "IsTwoProSegment",
    ellipsis: true,
    align: "center",
    width: "150px",
    scopedSlots: { customRender: "IsTwoProSegment" },
  },
  {
    title: "取样不管控平衡",
    dataIndex: "IfSampleBalance",
    key: "IfSampleBalance",
    ellipsis: true,
    align: "center",
    width: "150px",
    scopedSlots: { customRender: "IfSampleBalance" },
  },
  {
    title: "批号字符",
    dataIndex: "CharacterValue",
    key: "CharacterValue",
    ellipsis: true,
    align: "center",
    width: "100px",
  },
  {
    title: "销售数量",
    dataIndex: "SpecConvert",
    key: "SpecConvert",
    ellipsis: true,
    align: "center",
    width: "100px",
  },
  {
    title: "销售规格",
    dataIndex: "MarketingSpec",
    key: "MarketingSpec",
    ellipsis: true,
    align: "center",
    width: "100px",
  },
  {
    title: "装箱数量",
    dataIndex: "Spec",
    key: "Spec",
    ellipsis: true,
    align: "center",
    width: "100px",
  },
  {
    title: "装箱规格",
    dataIndex: "PackingSpec",
    key: "PackingSpec",
    ellipsis: true,
    align: "center",
    width: "100px",
  },
  {
    title: "操作",
    fixed: "right",
    dataIndex: "operate",
    width: "100px",
    align: "center",
    scopedSlots: { customRender: "action" },
  },
]; //基础项表格表头
export default {
  name: "MaterialManagement",
  components: {
    FileForm,
  },

  data() {
    return {
      buttonLoading: false,
      searchInfo: {
        materialCode: null,
        parentNode: "0",
      },
      searchData: {
        materialCode: null,
        pageRequestModel: {
          pageIndex: 1,
          pageSize: 30,
        },
      },
      replaceFields: {
        title: "MaterialName",
        isLeaf: "IfLeafNode",
      },
      treeData: [],
      selectedtreeData: {}, //选中树
      expandedKeys: [],
      autoExpandParent: true,
      dataList: [],
      dataStaus: false,
      dataListNum: 0,
      selecteddataList: {}, //选中
      selectedrow: {}, //修改物料

      edtiMaterialShow: false, //修改弹窗
      InItemShow: false, //上传
      loading: false,
      procedurescrollY: 0, //动态计算表格高度
      tableData: [], //表格数据
      tableColumns, //表格表头
      heightids: 100,
      tableRow: [], //当前选中表格项
      tableRowKeys: [], //当前选中表格ID
      tableBoxNum: 0, //基础项表格高度
      tableTotal: 0, //表格总条数
      tableSearch: {
        pageRequestModel: { pageIndex: 1, pageSize: 20 },
        StartDt: null,
        EndDt: null,
        ParentNode: "",
        MaterialName: "",
        MaterialCode: "",
        IfCleaning: null,
        IfDisinfect: null,
        IfIrradiation: null,
        IfLowValue: null,
        IfReceiveControl: null,
        IsTwoProSegment: null,
        IfSampleBalance: null,
      }, //table的搜索
      rowClick: (record, index) => {
        return {
          on: {
            click: () => {},
          },
        };
      }, //表格点击方法
      defaulttimeList: [], //默认时间
      typeList: [
        {
          type: 1,
          name: "是",
        },
        {
          type: 0,
          name: "否",
        },
      ],
    };
  },
  mounted() {
    let that = this;
    that.tableSearch.StartDt = null;
    that.defaulttimeList[0] = that.tableSearch.StartDt;
    that.tableSearch.EndDt = null;
    that.defaulttimeList[1] = that.tableSearch.EndDt;
    that.onSearch();
  },

  computed: {},
  methods: {
    //时间选择
    onTime(e, e1) {
      let that = this;
      that.tableSearch.StartDt = that.dateExt.showDate(e[0]._d);
      that.tableSearch.EndDt = that.dateExt.showDate(e[1]._d);
    },
    //时间选择器的样式填充
    getcurrentStyle(current, today) {
      const style = {};
      if (current.date() === 1) {
        style.border = "1px solid #1890ff";
        style.borderRadius = "50%";
      }
      return style;
    },
    searchValuechangeFun() {
      this.dataList = [];
      that.onLoadData();
      this.searchValuechange();
    },
    //滚动触底方法
    scroll(e) {
      let scrollTop = e.target.scrollTop; //滑入屏幕滚动条滚动时，距离顶部的距离
      let windowHeitht = e.target.clientHeight; //能看到的页面的高度
      let scrollHeight = e.target.scrollHeight; //监控的整个div的高度（包括现在看到的和上下隐藏起来看不到的）
      let total = scrollTop + windowHeitht;
      if (total == scrollHeight) {
        if (this.dataListNum == this.dataList.length)
          return this.$message.info("已无数据");
        this.buttonLoading = true;
        this.searchData.pageRequestModel.pageIndex += 1;
        this.searchValuechange();

        //加载操作
      } else {
        console.log("还没有到底");
      }
    },
    //查询物料
    upTableListFun() {
      this.tableSearch.pageRequestModel.pageIndex = 1;
      this.getTableListFun();
    },
    /** 工作集选中的项 */
    tableChangeFun(selectedRowKeys, selectedRows) {
      this.tableRow = selectedRows; //选中项信息
      this.tableRowKeys = selectedRowKeys; //选中项ID
    },
    /** 选中表格项变换颜色 */
    setRowClassName(record, index) {
      return record.BasicID == this.tableRow.BasicID ? "clickRowStyl" : ""; //
    },
    /** 表格页数点击 */
    tableChange(page, pageSize) {
      this.tableSearch.pageRequestModel.pageIndex = page;
      this.tableSearch.pageRequestModel.pageSize = pageSize;
      this.getTableListFun();
    },
    /** 基础项条数选择 */
    tablehowsizeChange(current, size) {
      this.tableSearch.pageRequestModel.pageIndex = current;
      this.tableSearch.pageRequestModel.pageSize = size;
      this.getTableListFun();
    },
    /** 查询表格项 */
    async getTableListFun() {
      try {
        getMaterialsByParentNode(this.tableSearch)
          .then((res) => {
            if (res.Status == 10000) {
              this.tableData = res.Data.Data;
              this.tableTotal = res.Data.TotalNumber;
              let { pageIndex, pageSize } = this.tableSearch.pageRequestModel;
              this.tableData.map((item, index) => {
                item.num = (pageIndex - 1) * pageSize + index + 1;
              });
            }
          })
          .catch((desc) => {
            this.$message.error(desc);
          });
      } catch (e) {
        this.$message.error(e);
      } finally {
      }
    },
    //点击展开
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      //console.log(this.expandedKeys)
      //this.autoExpandParent = false
    },
    async onSearch() {
      let that = this;
      that.buttonLoading = true;
      that.searchInfo.MaterialCode = this.searchData.materialCode;
      const res = await GetMaterialTypeList(that.searchInfo);
      if (res.Status == 10000) {
        that.treeData = res.Data;
        if (that.treeData && that.treeData.length > 0) {
          that.treeData.unshift({ MaterialName: "全部", MaterialCode: null });
          that.selecteddataList = that.treeData[0];
          this.getTableListFun();
        }
        that.buttonLoading = false;
      } else {
        that.$message.error(res.Message);
        that.buttonLoading = false;
      }
    },
    onLoadData(treeNode) {
      let that = this;
      return new Promise((resolve) => {
        if (treeNode.dataRef.children) {
          resolve();
          return;
        }
        let data = {
          materialCode: null,
          parentNode: treeNode.dataRef.MaterialCode,
        };
        GetMaterialTypeList(data)
          .then((res) => {
            res.Data.forEach((item) => {
              item.isLeaf = item.IfLeafNode;
            });
            treeNode.dataRef.children = res.Data;
            that.treeData = [...that.treeData];

            resolve();
          })
          .catch((desc) => {
            that.$message.error(desc);
          });
      });
    },
    btnActive(selectedKeys, e) {
      let that = this;
      that.expandedKeys = selectedKeys;
      that.selectedtreeData = e.node.dataRef;
      that.tableSearch.ParentNode = e.node.dataRef.MaterialCode;
      this.tableSearch.pageRequestModel.pageIndex = 1;
      that.getTableListFun();
    },
    selectdataList(item) {
      let that = this;
      that.selecteddataList = item;
      that.tableSearch.ParentNode = item.MaterialCode;
      that.getTableListFun();
    },
    async onSubmit() {
      let that = this;
      if (!that.selectedrow) {
        that.$message.success("请选择物料信息");
        return;
      }
      const res = await EditMaterial(that.selectedrow);
      if (res.Status == 10000) {
        that.getTableListFun();
        that.edtiMaterialShow = false;

        that.$message.success("保存成功");
      } else {
        that.$message.error(res.Message);
      }
    },
    searchValuechange(e) {
      let that = this;

      that.onSearch();
    },
    //修改物料
    editMaterialClick(item) {
      this.edtiMaterialShow = true;
      this.selectedrow = item;
    },
    //同步物料
    async SyncItem() {
      let that = this;
      let res = await SynchroMaterial();
      if (res.Status == 10000) {
        that.$message.success(res.Data);
        //that.onSearch()
      } else {
        that.$message.error(res.Message);
      }
    },
    InItem() {
      let that = this;
      that.InItemShow = true;
    },
    InItemShowList() {
      let that = this;
    },
    //下载模板
    async DownloadMaterial() {
      let that = this;
      if (!that.selectedtreeData) {
        that.$message.success("请选择物料类型");
        return;
      }

      that.buttonLoading = true;
      const res = await MaterialDownload(that.tableSearch);
      if (res.Status == 10000) {
        if (res.Data.FilebyteStr == null) return;
        var raw = window.atob(res.Data.FilebyteStr);
        var uInt8Array = new Uint8Array(raw.length);
        for (var i = 0; i < raw.length; i++) {
          uInt8Array[i] = raw.charCodeAt(i);
        }
        const blob = new Blob([uInt8Array], {
          type: "application/vnd.ms-exce",
        });
        let url = window.URL.createObjectURL(blob);
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.download = `${res.Data.Name}`;
        document.body.appendChild(link);
        link.click();
      } else {
        that.$message.error(res.Message);
      }
      that.buttonLoading = false;
    },
    boolstr(key) {
      let keystr = "";
      switch (key) {
        case true:
          keystr = "true";
          break;
        case false:
          keystr = "false";
          break;
        default:
          break;
      }
      return keystr;
    },
  },
  updated() {
    this.$nextTick(() => {
      this.procedurescrollY = getTableScroll(80, "OperationManageID");
    });
  },
};
</script>
<style lang="less" scoped>
.device-home {
  display: flex;
  flex: 1;
  overflow: hidden;

  .device-home-left {
    flex: 1;

    overflow: hidden;
    background-color: #ffffff;

    .left-serach {
      display: flex;
      padding: 0.625rem;

      .serch-icon {
        font-size: 1.25rem;
        margin-left: 0.625rem;
        cursor: pointer;
      }
    }

    .tabtop {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-end;
      height: 2rem;
      margin-right: 0.2rem;
    }

    .tabflex {
      display: flex;
      flex-wrap: nowrap;
      flex-direction: column;
    }

    .demo-infinite-container {
      height: 96%;
      padding: 0.625rem;
      overflow-y: auto;

      &::-webkit-scrollbar {
        margin: 0.2rem;
        //整体样式
        height: 0.4125rem;
        width: 0.3rem;
      }

      &::-webkit-scrollbar-thumb {
        //滑动滑块条样式
        border-radius: 0.625rem;
        -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
        background: #009a9a;
        // background: rgba(2, 35, 60, 1);
      }

      &::-webkit-scrollbar-track {
        //轨道的样式
        -webkit-box-shadow: 0;
        border-radius: 0.625rem;
        background: #ccc;
      }

      &::-webkit-scrollbar-corner {
        background: red;
      }
    }
  }
  .table-box {
    min-height: 240px;
    flex: 2;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .operation-table {
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 100%;
      min-height: 240px;

      .operation-table-box {
        flex: 2;
      }
    }

    .workunit-table {
      flex: 1;
      border: 1px solid #dddddd;
      border-radius: 0.625rem;
      padding: 0.9375rem;

      .workunit-title {
        margin-bottom: 0.625rem;
      }
    }
  }
  .device-home-right {
    flex: 6;
    margin-left: 0.2rem;

    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #ffffff;

    .right-head {
      display: flex;
      margin-bottom: 1rem;

      .content-top {
        padding: 1rem;
      }
    }

    .right-content {
      display: flex;
      flex-direction: column;
      height: 100%;

      .content-table {
        position: relative;
        background-color: #ffffff;
        border-radius: 0.8rem;

        .table-center {
          margin-top: 0.625rem;
        }

        padding: 1rem;
        flex: 5;

        .table-head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 1rem 0;

          .table-title {
            font-size: 1rem;
          }

          .table-btn {
            display: flex;

            div {
              margin: 0 0.3125rem;
            }
          }
        }

        .table-info {
          div {
            display: flex;
            justify-content: space-between;

            span {
              font-size: 0.8rem;
              // font-weight: bold;
              margin: 0.4rem;
              flex: 1;
            }
          }
        }

        .pagin-box {
          position: absolute;
          bottom: 1.125rem;
          right: 1.125rem;
        }
      }
    }
  }

  .enable {
    color: #90ee90;
  }

  .disabled {
    color: #b22222;
  }
}

.gutter-example :deep(.ant-row > div) {
  background: transparent;
  border: 0;
}

.gutter-box {
  margin-left: 0.5rem;
}

.listboxactive {
  background: #e6f7ff;
}

.fieldset {
  height: 100%;
  overflow-y: auto;
  padding: 0.35em 0.625em 0.75em;
  margin: 0 2px;
  border: 1px solid silver;

  .legend {
    padding: 0.5em;
    border: 0;
    width: auto;
  }
}
.spansty {
  text-align: right;
  line-height: 30px;
  margin-bottom: 14px;
}
.list-box {
  height: calc(100%);
  overflow-y: auto;

  &::-webkit-scrollbar {
    margin: 0.2rem;
    //整体样式
    height: 0.4125rem;
    width: 0.3rem;
  }

  &::-webkit-scrollbar-thumb {
    //滑动滑块条样式
    border-radius: 0.625rem;
    -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
    background: #009a9a;
    // background: rgba(2, 35, 60, 1);
  }

  &::-webkit-scrollbar-track {
    //轨道的样式
    -webkit-box-shadow: 0;
    border-radius: 0.625rem;
    background: #ccc;
  }

  &::-webkit-scrollbar-corner {
    background: red;
  }
}
/deep/.ant-form-item {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  font-variant: tabular-nums;
  list-style: none;
  font-feature-settings: "tnum";
  margin-bottom: 3px;
  vertical-align: top;
}
</style>
